<template>
  <div class="register">
    <div class="container">
      <h2>注册</h2>
      <p>
        已经有账号?
        <span style="color: #1e5eff"><a href="/login">点击登录</a></span>
      </p>

      <el-form
        ref="ruleFormRef"
        :model="userForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            placeholder="输入图书账号"
            class="input-with-select"
            v-model="userForm.username"
          >
            <template #prepend> <el-button :icon="User" /> </template
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="输入图书密码"
            class="input-with-select"
            v-model="userForm.password"
            show-password
          >
            <template #prepend> <el-button :icon="Lock" /> </template
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            placeholder="再次输入图书密码"
            class="input-with-select"
            v-model="userForm.repassword"
            show-password
          >
            <template #prepend> <el-button :icon="Lock" /> </template
          ></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input
            placeholder="输入邮箱"
            class="input-with-select"
            v-model="userForm.email"
            ><template #prepend> <el-button :icon="Message" /> </template
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" id="registerBtn" @click="submitForm(ruleFormRef)"
            >注 册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { Lock, User, Message } from "@element-plus/icons-vue";
import {useStore} from 'vuex'
import { ElMessage } from "element-plus";
const userForm = reactive({});
const store = useStore();
const vailPassWord = ref("");
const ruleFormRef = ref();
const validateUsername = (rule, value, callback) => {
  if (!value) {
    callback(new Error("账号不允许位为空"));
  } else {
    if (userForm.username !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("validateUsername", () => null);
    }
    callback();
  }
};
const validatePassword = (rule, value, callback) => {
  if (!value) {
    callback(new Error("密码不允许位为空"));
  } else {
    if (userForm.password !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("validatePassword", () => null);
    }
    callback();
  }
};
const RevalidatePassword = (rule, value, callback) => {
  if (!value) {
    callback(new Error("密码不允许位为空"));
  } else if (value !== userForm.password) {
    callback(new Error("两次密码输入不一致"));
  } else {
    if (userForm.password !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("validatePassword", () => null);
    }
    callback();
  }
};
const vaildateEmail = (rule, value, callback) => {
  if (!value) {
    callback(new Error("邮箱不允许位为空"));
  } else if (
    !/^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(
      value
    )
  ) {
    callback(new Error("邮箱格式不正确"));
  } else {
    if (userForm.password !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("validatePassword", () => null);
    }
    callback();
  }
};
const rules = reactive({
  username: [{ validator: validateUsername, trigger: "blur" }],
  password: [{ validator: validatePassword, trigger: "blur" }],
  repassword: [{ validator: RevalidatePassword, trigger: "blur" }],
  email: [{ validator: vaildateEmail, trigger: "blur" }],
});
const submitForm=(formEl)=>{
    if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
        const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
        let user = {
            username:userForm.username,
            password:userForm.password,
            email:userForm.email
        }
        store.dispatch('Register',user)
        setTimeout(()=>{
            let flag = computed(()=>store.getters["getFlag"])
            if(flag.value.code===200){
                ElMessage.success('注册成功')
                loading.close();
            }
        },500)
    } else {
      ElMessage.error('请按照要求填写资料')
      return false
    }
  })
}
</script>

<style scoped>
.register {
  width: 100%;
  height: 100vh;
  background-color: rgb(222, 232, 255);
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  width: 30%;
  height: 60vh;
  background-color: #fff;
  text-align: center;
}

h2 {
  text-align: center;
}
.container p {
  text-align: center;
  color: #5a607f;
  font-size: 13px
}
a {
  text-decoration: none;
  color: #1e5eff;
}
.container .el-input {
  width: 60%;
  /* margin-left: -5%; */
  margin-top: 1vh;
}
.container #registerBtn{
    width: 60%;
    background-color: #1e5eff;
}
</style>